<template>
  <div style=" background-color: rgb(235, 238, 245);">
    <el-container class="container">
      <el-header class="header">
        <el-select
          v-model="queryJoin.propertyName"
          placeholder="请选择"
          style="width: 200px"
          filterable
          @change="inputORselect"
        >
          <template v-for="item in columes">
            <el-option
              :key="item.key"
              :label="item.label"
              :value="item.key"
              v-show="!item.search"
              v-if="item.visible"
            >
            </el-option>
          </template>
        </el-select>

        <el-select
          v-model="queryJoin.jojntType"
          placeholder="请选择"
          style="width: 150px"
        >
          <el-option
            v-for="item in join"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input
          v-if="selectBoolean"
          placeholder="请输入内容"
          style="width: 200px"
          v-model="queryJoin.price"
          @keyup.enter.native="getList"
        ></el-input>

        <el-select
          v-else
          v-model="queryJoin.price"
          placeholder="请选择"
          style="width: 200px"
        >
          <el-option
            v-for="dict in dictList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>

        <el-button
          icon="el-icon-search"
          type="primary"
          @click="getList"
          style="margin-left: 5px"
        >查 询
        </el-button
        >
        <el-button icon="el-icon-refresh-right" @click="resetAdvanced"
        >重 置
        </el-button
        >
        <el-button
          icon="el-icon-zoom-in"
          type="success"
          @click="advanced = true"
        >高级检索
        </el-button
        >
        <template>
          <slot name="button"></slot>
        </template>
      </el-header>
      <el-main>
        <el-table
          ref="doLayout"
          :data="data.rows"
          height="825px"
          v-bind="$attrs"
          :border="border"
          :header-cell-style="{
          background: '#f5f7fa',
        }"
        >
          <el-table-column align="center" type="selection" v-if="selection"/>
          <el-table-column type="index" align="center" label="序号" width="50"/>
          <template v-for="(item, index) in columes">
            <el-table-column
              :key="item.key"
              v-if="item.visible"
              :prop="item.dictCode || item.table ? item.key + 'Text' : item.key"
              align="center"
              show-overflow-tooltip
              v-bind="item"
            >
              <template #default="scope" v-if="item.type === 'slot'">
                <!-- 这是列表插槽，如果是type=slot并且不是操作的，就显示自定义插槽 -->
                <slot
                  :name="item.key"
                  v-bind="scope"
                  v-if="item.key !== 'operation'"
                ></slot>
                <!-- 如果是type=slot，并且key是操作，那么就插槽内部显示删除，并且自定义插槽 -->
                <div v-else>
                  <!--  将index页面自定义的操作插入进来-->
                  <slot :name="item.key" v-bind="scope"></slot>
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDelete(scope)"
                    v-if="item.delete"
                  >
                    <el-link slot="reference" type="danger">删除</el-link>
                  </el-popconfirm>
                </div>
              </template>
              <template slot="header" v-if="index === columes.length - 1">
                <span>{{ item.label }}</span>
                <right-toolbar @queryTable="doLayout" :columns="columes"></right-toolbar>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-main>
      <el-footer class="footer" style="height: 50px">
        <pagination style="bottom: 15px;"
          v-show="data.total >= 0"
          :total="data.total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :page-sizes="[20, 50, 100, 500]"
          :page-size="20"
          @pagination="getList"
        />
      </el-footer>
    </el-container>
    <el-dialog
      class="my_dialog"
      title="检索条件"
      @open="open"
      :visible.sync="advanced"
      width="600px"
      :close-on-click-modal="false"
      v-draggable
    >
      <div
        v-for="(item, index) in advancedList"
        :key="index"
        style="margin-bottom: 10px"
      >
        <div v-if="item.visible">
          <el-input style="width: 200px" v-model="item.fieldName"></el-input>

          <el-select
            v-model="item.jojntType"
            placeholder="请选择"
            style="width: 150px"
          >
            <el-option
              v-for="item in join"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-input
            v-if="item.dictCode == ''"
            placeholder="请输入内容"
            style="width: 200px"
            v-model="item.price"
          ></el-input>

          <el-select
            v-else
            v-model="item.price"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="dict in item.dictList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetAdvanced" icon="el-icon-refresh-right"
        >重 置</el-button
        >
        <el-button type="primary" @click="advancedGetList" icon="el-icon-search"
        >检 索</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>


<script>
  import request from "@/utils/request";
  import {getDicts} from "@/api/system/dict/data";

  export default {
    props: ["columes", "selection", "url", "deletUrl"],
    data() {
      return {
        stripe: true,
        border: true,
        //切换input框和select下拉选
        selectBoolean: true,
        //高级检索的弹窗
        advanced: false,
        data: {
          total: 0,
        },
        join: [
          {
            label: "包含",
            value: "like",
          },
          {
            label: "等于",
            value: "eq",
          },
          {
            label: "不等于",
            value: "ne",
          },
          {
            label: "大于等于",
            value: "ge",
          },
          {
            label: "小于等于",
            value: "le",
          },
        ],
        queryJoin: {
          propertyName: "",
          jojntType: "like",
          price: "",
        },
        pageNum: 1,
        pageSize: 20,

        //查询条件数组
        list: [],

        //高级检索的条件查询数组
        advancedList: [],

        //字典的数据
        dictList: [],
      };
    },
    activated() {
      this.doLayout();
    },
    created() {
      this.getList();
      this.searchAdd();
    },
    methods: {
      //初始化
      searchAdd() {
        for (let index = 0; index < this.columes.length; index++) {
          const element = this.columes[index];
          if (!element.search) {
            this.queryJoin.propertyName = element.key;
            this.inputORselect(this.queryJoin.propertyName);
            return;
          }
        }
      },
      //删除数据
      handleDelete(scope) {
        let data = JSON.parse(JSON.stringify(scope.row));
        request({
          url: this.deletUrl + "?id=" + data.id,
          method: "delete",
        })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      },
      //数据获取
      async getList() {
        if ((this.queryJoin.price != null) & (this.queryJoin.price != "")) {
          let join = {
            propertyName: this.queryJoin.propertyName,
            jojntType: this.queryJoin.jojntType,
            price: this.queryJoin.price,
          };
          this.list.push(join);
        } else {
          this.advancedList.forEach((el) => {
            if ((el.price != null) & (el.price != "")) {
              let join = {
                propertyName: el.propertyName,
                jojntType: el.jojntType,
                price: el.price,
              };
              this.list.push(join);
            }
          });
        }
        console.log("---条件---" + JSON.stringify(this.list));
        request({
          url:
            this.url + "?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
          method: "post",
          data: this.list,
        }).then((res) => {
          // console.log("---结果---" + JSON.stringify(res));
          this.data = res;
          this.list = [];
          this.advanced = false;
        });
      },
      //重置
      reset() {
        this.list = [];
        // this.queryJoin.propertyName = this.columes[0].key;
        this.searchAdd();
        this.queryJoin.jojntType = "like";
        this.queryJoin.price = "";
        this.selectBoolean = true;
        this.getList();
      },
      //判断选择的条件参数是否支持下拉选
      inputORselect(item) {
        this.queryJoin.price = "";
        this.columes.forEach((el) => {
          if (el.key == item) {
            if (el.dictCode) {
              getDicts(el.dictCode).then((res) => {
                console.log(res.data);
                this.dictList = res.data;
                this.selectBoolean = false;
                return;
              });
            } else {
              this.selectBoolean = true;
            }
          }
        });
      },
      open() {
        this.advancedListAdd();
      },
      //高级检索条件注入
      advancedListAdd() {
        this.advancedList = [];
        this.columes.forEach((el) => {
          if (!el.search) {
            let queryJoin = {
              propertyName: el.key,
              fieldName: el.label,
              jojntType: "like",
              price: "",
              visible: el.visible,
              dictCode: "",
              dictList: [],
            };
            if (el.dictCode) {
              queryJoin.dictCode = el.dictCode;
              getDicts(el.dictCode).then((res) => {
                queryJoin.dictList = res.data;
                // queryJoin.selectBoolean = false;
              });
            }
            this.advancedList.push(queryJoin);
          }
        });
      },
      //高级检索重置
      resetAdvanced() {
        this.advancedList.forEach((element) => {
          element.price = "";
        });
        this.reset();
        this.advancedListAdd();
      },
      //高级检索的查询
      advancedGetList() {
        this.queryJoin.price = "";
        this.getList();
      },
      doLayout() {
        this.$nextTick(() => {
          this.$refs.doLayout.doLayout();
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    height: 966px;
    border: 1px solid #eee;
    padding: 5px
  }

  .header {
    background-color: #fff;
    height: 65px;
    padding: 14px;
    margin-bottom: 10px
  }

  .footer {
    background-color: #fff;
  }

  .el-main {
    padding: 0;
  }

  .select {
    margin: 10px;
  }

</style>
